<template>
  <div>
    <div class="tip">
      小组成员：
      <a-tag color="blue" v-for="(item, index) in members" :key="index">{{
        item
      }}</a-tag>
    </div>

    <a-row>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="8">
              <a-statistic title="总阅读量" :value="statistic.viewCount">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="总点赞量" :value="statistic.voteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="点赞率" :value="(statistic.voteCount / statistic.viewCount) * 100" :precision="2"
                suffix="%" :value-style="{ color: '#cf1322' }">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br />
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic title="今日阅读" :value="statistic.todayViewCount" style="margin-right: 50px">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic title="预计今日阅读" :value="statistic.todayViewIncrease" :value-style="{ color: '#0000ff' }">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="预计今日阅读增长" :value="statistic.todayViewIncreaseRateAbs" :precision="2" suffix="%"
                class="demo-class" :value-style="statistic.todayViewIncreaseRate < 0
        ? { color: '#3f8600' }
        : { color: '#cf1322' }
        ">
                <template #prefix>
                  <arrow-down-outlined v-if="statistic.todayViewIncreaseRate < 0" />
                  <arrow-up-outlined v-if="statistic.todayViewIncreaseRate >= 0" />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-col :span="24" id="main-col">
        <div id="main" style="width: 100%; height: 300px"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

import { useApi } from "@/api";
import { DayStatistic, EchartsData } from "@/views/type";
const api = useApi();

const members = [, "王妤", "张萍藩", "王智", "何zhongqin", "邓燕敏", "田正东"]
const statistic = ref<DayStatistic>({
     date: "",
     viewCount: 0,
     voteCount: 0,
     viewIncrease: 0,
     voteIncrease: 0,
     todayViewIncrease: 0,
     todayViewIncreaseRate: 0,
     todayViewIncreaseRateAbs: 0,
     todayVoteCount: 0,
     todayViewCount: 0,
   });






  



const getEcharsData = async () => {

  const data = await api.getStatistic<EchartsData[]>();
  console.log("getEcharsData", data);

  if (!data || data.length === 0) {
    throw new Error("未获取到统计数据");
  }
  const statisticResp = data[0];

  statistic.value = {
    ...statistic.value,
    viewCount: statisticResp.viewCount || 0,
    voteCount: statisticResp.voteCount || 0,
    todayViewCount: statisticResp.viewIncrease || 0,
    todayVoteCount: statisticResp.voteIncrease || 0,
  };

  // 按分钟计算当前时间点，占一天的百分比
  const now = new Date();
  const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);

  // console.log(nowRate)

  // 防止nowRate为0导致的除数为零错误
  statistic.value.todayViewIncrease = nowRate !== 0
    ? parseInt(String(statisticResp.viewIncrease / nowRate))
    : 0;

  // 确保viewIncrease不为0以避免除数为零错误
  // todayViewIncreaseRate：今日预计增长率
  if (statisticResp.viewIncrease !== 0) {
    statistic.value.todayViewIncreaseRate =
      ((statistic.value.todayViewIncrease - statisticResp.viewIncrease) /
        statisticResp.viewIncrease) * 100;
  } else {
    statistic.value.todayViewIncreaseRate = 0; // 或者根据实际情况处理
  }
  statistic.value.todayViewIncreaseRateAbs = Math.abs(
    statistic.value.todayViewIncreaseRate
  );

};

onMounted(() => {
  getEcharsData();
  // testEcharts();
  get30DayStatistic();
});

const init30DayEcharts = (list: any) => {
  // 发布生产后出现问题：切到别的页面，再切回首页，报表显示不出来
  // 解决方法：把原来的id=main的区域清空，重新初始化
  const mainDom = document.getElementById("main-col");
  if (mainDom) {
    mainDom.innerHTML =
      '<div id="main" style="width: 100%;height:300px;"></div>';
  }
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main"));

  const xAxis = [];
  const seriesView = [];
  const seriesVote = [];
  for (let i = 0;i < list.length;i++) {
    const record = list[i];
    xAxis.push(record.date);
    seriesView.push(record.viewIncrease);
    seriesVote.push(record.voteIncrease);
  }

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: "30天趋势图",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["总阅读量", "总点赞量"],
    },
    grid: {
      left: "1%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "总阅读量",
        type: "line",
        // stack: '总量', 不堆叠
        data: seriesView,
        smooth: true,
      },
      {
        name: "总点赞量",
        type: "line",
        // stack: '总量', 不堆叠
        data: seriesVote,
        smooth: true,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

const get30DayStatistic = async () => {
  const data = await api.get30Statistic<EchartsData[]>();
  const statisticList = data

  init30DayEcharts(statisticList);
};

// const testEcharts = () => {
//   // 基于准备好的dom，初始化echarts实例
//   const myChart = echarts.init(document.getElementById("main"));

//   // 指定图表的配置项和数据
//   const option = {
//     title: {
//       text: "ECharts 入门示例",
//     },
//     tooltip: {},
//     legend: {
//       data: ["销量"],
//     },
//     xAxis: {
//       data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
//     },
//     yAxis: {},
//     series: [
//       {
//         name: "销量",
//         type: "bar",
//         data: [5, 20, 36, 10, 10, 20],
//       },
//     ],
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
// };


</script>
<style scoped>
.tip {
  padding: 10px 5px;
  margin-bottom: 20px;
  color: red;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/0.6em 0.6em;
  animation: ants 12s linear infinite;
}
</style>
